<template>
<el-dropdown :hide-on-click="false" trigger="click" @command="handleSelect">
  <span class="el-dropdown-link">
    {{labelVlaue}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item v-for="item in optionDatas" :key="item.value" :command="item.value" >{{item.label}}</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
</template>

<script>
export default {
    props: ['data','value','label'],
    computed: {
        optionDatas() {
            if(Array.isArray(this.data)) {
                return this.data
            }
            return []
        },
        labelVlaue(){
          if(this.value) {
            const result = this.optionDatas.find(item => item.value == this.value)
            if(result) {
              return result.label
            }
          }
          return this.label ? this.label : ''
        }
    },
    methods: {
        handleSelect(value) {
            this.$emit('input',value)
        }
    }
};
</script>

<style>
</style>